<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构默认值实现配置项合并</title>
</head>
<body>
    <script>
        let hd = {lesson : 'js',price : 99};
        let {lesson} = hd;
        console.log(lesson);

        let hd1 = {lesson1 : 'js',price1 : 99};
        let {lesson1,price1} = hd1;
        console.log(lesson1,price1);

        // 如果取对象中没有的属性，返回undefined
        let hd2 = {lesson2 : 'js',price2 : 99};
        let {lesson2,price2,name2} = hd2;
        console.log(name2);

        // 可以给对象中没有的属性一个默认值
        let hd3 = {lesson3 : 'js',price3 : 99};
        let {lesson3,price3,name3="好书"} = hd3;
        console.log(name3);

        // 如果属性中有值，又有默认值，先取属性中的值
        let hd4 = {lesson4 : 'js',price4 : 99,name4 : "好人"};
        let {lesson4,price4,name4="好书"} = hd4;
        console.log(name4);



        function createDocument(option = {}){
            let {background="red",width="300px",height="200px"} = option;
            const div = document.createElement("div");
            div.style.width = width;
            div.style.background = background;
            div.style.height = height;
            document.body.appendChild(div);
        }
        createDocument();
        createDocument({background:"green"});
    </script>
</body>
</html>